Skip to content

SL-346: add accessibility improvements for EAA compliance#320

Open
GytisZum wants to merge 27 commits into
SL-358/payment-fieldfrom
SL-346/accessibility-eaa-compliance
Open

SL-346: add accessibility improvements for EAA compliance#320
GytisZum wants to merge 27 commits into
SL-358/payment-fieldfrom
SL-346/accessibility-eaa-compliance

Conversation

@GytisZum

@GytisZum GytisZum commented Mar 20, 2026

Copy link
Copy Markdown
Collaborator

Self-Checks

  • I have performed a self-review of my code.
  • I have updated/added necessary technical documentation in the README file.

JIRA task link

https://invertus.atlassian.net/browse/SL-346

Summary

Brings the BO Settings React app in line with WCAG 2.1 AA / European Accessibility Act (EAA) requirements by ensuring every interactive control exposes a discernible accessible name to assistive technology.

What changed and why

1. Payment Methods — mobile-card switches (payment-methods.tsx)

The Payment Methods tab renders the methods list in two parallel layouts:

  • Desktop table (visible ≥ md): each switch already has aria-label="Enable {Method}", aria-label="Logos {Method}", etc. ✅
  • Mobile cards (visible < md, wrapped in md:sp-hidden): only the "Enable" switch had an aria-label. The "Logos" and "Custom form" switches inside each card had no aria-label, no associated <label for>, and no <label> wrapper — only a sibling <span> with the visible text. Sighted users could see "Logos" via proximity, but screen reader users heard only "switch, off" with no method or purpose context.

Added aria-label={${t('logos')} ${method.displayName}} and aria-label={${t('customForm')} ${method.displayName}} to mirror the desktop pattern.

Impact: removes 28 of 33 "Buttons must have discernible text" violations.

2. Settings tab triggers (saferpay-settings.tsx)

The five Radix TabsTrigger buttons (API Credentials / Payment Methods / Payment Processing / Email Notifications / General Settings) render an icon plus a text label. The text is wrapped in <span className="sp-hidden sm:sp-inline"> — so on viewports below sm (640px) only the icon is visible. Because the button itself had no aria-label, the accessible name was empty at that breakpoint and assistive tech announced "button" with no indication of which tab.

Added aria-label={t('tabApiCredentials')} (and equivalents) to each TabsTrigger. The visible text remains the source of truth on wider viewports; the aria-label provides an equivalent name for AT regardless of viewport.

Impact: removes the remaining 5 "Buttons must have discernible text" violations.

How it was tested

Manual verification against the same testing environment used for SL-346 QA (PrestaShop 8.2.3 + ngrok), at iPhone 12 Pro / 14 Pro Max viewport widths to surface the mobile layout.

Tools used:

  • axe DevTools 4.11.3 (Chrome extension) — full-page scan, WCAG 2.1 AA ruleset
  • Lighthouse Accessibility audit — desktop snapshot mode
  • DOM/console assertions to enumerate orphan button[role="switch"] and button[role="tab"] elements

Before fix (axe DevTools, mobile viewport)

  • 36 total issues: 33 critical "Buttons must have discernible text" + 3 serious "Color contrast"
  • Critical violations broken down: 28 mobile switches + 5 tab triggers

After fix (same viewport, hard reload)

  • 8 total issues: 5 critical → 0 critical for switches/tabs after fix is applied
  • Remaining 3 serious "Color contrast" issues are unrelated design-token problems (sp-text-emerald-600, sp-text-muted-foreground) and out of scope for this PR

Reproduction snippet (browser console)

// Should return [] after fix; returned 28 entries before
Array.from(document.querySelectorAll('button[role="switch"]'))
  .filter(s => s.offsetParent !== null)
  .filter(s => !s.getAttribute('aria-label') && !s.getAttribute('aria-labelledby') && !s.closest('label'));

Regression sanity

  • Desktop layout (≥ md): visible labels still render unchanged; aria-label on TabsTrigger becomes the accessible name but does not affect rendered text
  • All Payment Methods toggles still operate (Enable / Logos / Custom form / Countries / Currencies)
  • Tab navigation between API Credentials / Methods / Processing / Email / General works the same in keyboard and pointer modes

QA Checklist Labels

  • Bug fix?
  • New feature?
  • Improvement?
  • Technical debt?
  • Reusable?
  • Covered by tests?

Additional Context

This PR continues the EAA compliance work started in commit a766c1. Two other minor accessibility findings remain for follow-up (separate PRs): the "Hosted field style" combobox in General Settings still lacks a programmatic label, and three text tokens fail WCAG AA color contrast.

Frontend Changes

No visual changes — these edits add ARIA attributes only. Verified with axe DevTools before/after at the same viewport.

@gemini-code-assist

Copy link
Copy Markdown
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly improves the application's accessibility to meet EAA compliance standards. The changes focus on making the user interface more navigable and understandable for users relying on assistive technologies, by providing clearer semantic structures and interactive feedback across key components like forms, modals, and payment processes.

Highlights

  • Accessibility Improvements (EAA Compliance): Implemented various changes to enhance accessibility across the application, focusing on EAA compliance. This includes adding ARIA attributes, improving keyboard navigation, and ensuring better screen reader support for interactive elements.
  • Enhanced Modal Interaction: Improved the log modal's accessibility by adding a dedicated close button, enabling keyboard navigation (Escape key to close), and ensuring focus management when opening and closing the modal.
  • ARIA Attribute Integration: Introduced aria-label, aria-modal, aria-labelledby, role, and aria-live attributes to various components such as buttons, input fields, modals, iframes, images, and loading indicators to provide better context for assistive technologies.
  • UI Element Refinements: Updated several UI elements, including changing a 'View' div to a button, converting a payment link to a button, and wrapping radio inputs in labels for improved semantic structure and usability.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a comprehensive set of accessibility improvements across various templates and JavaScript files. Key changes include enhancing form element labeling, providing descriptive aria-label and alt attributes, improving modal dialog semantics with ARIA roles, and ensuring interactive elements like buttons are semantically correct. These changes significantly improve the user experience for individuals using assistive technologies, aligning the application with better accessibility standards.

Comment thread views/js/admin/log.js
Comment on lines +24 to +30
function closeModal($modal) {
$modal.removeClass('open');
var triggerButton = $modal.data('triggerButton');
if (triggerButton) {
triggerButton.focus();
}
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The closeModal function correctly handles closing the modal and returning focus to the trigger button. This is a crucial accessibility pattern for modal dialogs, ensuring keyboard users can easily navigate back to their previous context.

Comment thread views/js/admin/log.js
Comment on lines +42 to +49
$(document).on('keydown', function (event) {
if (event.key === 'Escape') {
var $openModal = $('.modal.open');
if ($openModal.length) {
closeModal($openModal);
event.preventDefault();
}
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Implementing the 'Escape' key to close the modal is an excellent accessibility feature, providing an intuitive way for keyboard users to dismiss the dialog.

Comment thread views/js/admin/log.js
// NOTE: opening modal
$('#' + $(this).data('target')).addClass('open');
$modal.addClass('open');
$modal.find('.js-log-modal-close').focus();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Setting focus to the close button when the modal opens is a good practice for accessibility, as it immediately places the user's focus within the modal and provides an obvious way to exit.

type="button"
onClick={() => setShowApiPassword(!showApiPassword)}
className="sp-absolute sp-right-3 sp-top-1/2 sp--translate-y-1/2 sp-text-muted-foreground hover:sp-text-foreground sp-transition-colors"
className="sp-absolute sp-right-3 sp-top-1/2 sp--translate-y-1/2 sp-text-muted-foreground hover:sp-text-foreground sp-transition-colors sp-p-1 sp-min-w-[24px] sp-min-h-[24px] sp-flex sp-items-center sp-justify-center"

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Adding sp-p-1 sp-min-w-[24px] sp-min-h-[24px] sp-flex sp-items-center sp-justify-center to the password toggle button improves its clickable area and visual consistency, which enhances usability and accessibility for users with motor impairments or those using touch interfaces.


<div className="sp-flex sp-justify-end">
<Button className="sp-min-w-[120px]" onClick={saveCredentials} disabled={saving}>
<Button className="sp-min-w-[120px]" onClick={saveCredentials} disabled={saving} aria-label={saving ? t('saving') : undefined}>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Adding a dynamic aria-label to the save button that indicates its 'saving' state provides crucial feedback for screen reader users, improving the accessibility of the form submission process.

Comment on lines +39 to +41
<button type="submit" class="btn btn-default button button-medium">
<span>{l s='Pay' mod='saferpayofficial'}<i class="icon-chevron-right right"></i></span>
</a>
</button>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Changing the <a> tag to a <button type="submit"> is a crucial semantic and accessibility improvement. Buttons are designed for actions like form submission, providing correct semantics and expected behavior for assistive technologies.

Comment on lines +28 to +33
<label>
<input type="radio" name="saved_card_{$paymentMethod|escape:'htmlall':'UTF-8'}" value="{$savedCard['id_saferpay_card_alias']|escape:'htmlall':'UTF-8'}"
{if $selected }checked="checked" {$selected = 0}{/if}
>
<span>{$savedCard['card_number']|escape:'htmlall':'UTF-8'}</span>
</label>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Wrapping each radio input and its associated text within a <label> tag is the correct and most accessible way to associate labels with radio buttons. This makes the entire label clickable and improves usability for all users.

Comment on lines +37 to +42
<label>
<input type="radio" name="saved_card_{$paymentMethod|escape:'htmlall':'UTF-8'}" value="0"
{if $selected }checked="checked"{/if}
>
<span>{l s='Use new card and save it' mod='saferpayofficial'}</span>
</label>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Wrapping each radio input and its associated text within a <label> tag is the correct and most accessible way to associate labels with radio buttons. This makes the entire label clickable and improves usability for all users.

Comment on lines +45 to 49
<label>
<input type="radio" name="saved_card_{$paymentMethod|escape:'htmlall':'UTF-8'}" value="-1">
<span>{l s='Use new card once' mod='saferpayofficial'}</span>
</label>
</div>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Wrapping each radio input and its associated text within a <label> tag is the correct and most accessible way to associate labels with radio buttons. This makes the entire label clickable and improves usability for all users.


<div>
<iframe id="test-frame" src=''></iframe>
<iframe id="saferpay-payment-frame" src='' title="{l s='Saferpay payment form' mod='saferpayofficial'}"></iframe>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Changing the iframe id to saferpay-payment-frame and adding a descriptive title attribute are good practices. The title attribute is particularly important for accessibility, providing context for screen reader users about the iframe's content.

@gemini-code-assist

Copy link
Copy Markdown
Contributor

Warning

Gemini encountered an error creating the review. You can try again by commenting /gemini review.

Tadas Labutis and others added 26 commits May 8, 2026 12:47
Adds discernible accessible names to interactive controls that
were unlabelled at narrow viewports, resolving 33 of the 36 axe-core
violations found during SL-346 QA.

- Payment Methods mobile cards: add aria-label to "Logos" and
  "Custom form" switches (28 violations). Desktop layout was already
  labelled; only the md:sp-hidden mobile block was missing labels.
- Settings tab triggers: add aria-label to all five TabsTrigger
  buttons (5 violations). Visible text labels are wrapped in
  sp-hidden sm:sp-inline so on mobile only the icon shows; without
  aria-label the buttons had no accessible name.
- Darken --sp-muted-foreground from 46% to 38% lightness (4.31:1 -> ~6.4:1)
- Replace sp-text-emerald-600 with sp-text-emerald-700 in API Credentials
  (3.76:1 -> 5.27:1 on white, 3.57:1 -> ~5:1 on emerald-50)

Resolves 3 axe-core color-contrast violations across all 5 settings tabs.
Verified: 0 contrast issues remain inside #saferpay-settings-root.
Radix Label component does not auto-wire to SelectTrigger; without
an explicit aria-label, screen readers announced only the selected
value. Resolves last open finding in TC-346.1.
Previously Tab could escape the modal into background page content
violating WCAG 2.1.2 (Focus Order) for modal dialogs. Tab/Shift+Tab
now cycle within the modal's focusable elements.

Resolves TC-346.7.
PrestaShop core .btn-primary teal (#25b9d7) on white was 2.6:1 — fails
WCAG 2.1 AA (requires 4.5:1). Scoped override on #saferpay-admin-form
only, so other admin pages keep their PS theme. Refund/Capture buttons
now use the module brand teal #1c7c80 (5.27:1).
Without scope, screen readers cannot reliably associate header cells
with their data column. Resolves TC-346.10 (FO saved credit cards).
The PS Classic theme rendered the Remove link in teal #24b9d7 on white
(2.6:1) which fails WCAG 2.1 AA. Use brand teal #1c7c80 (5.27:1) via
inline color so the override does not bleed to other theme buttons.
The .btn-primary (BO admin order) and .btn-default (FO saved cards)
contrast issues originate in PrestaShop core/theme CSS, not in our
module. Overriding them at module level was the wrong layer:
- fragile against theme updates
- could clash with merchant theme customizations
- inconsistent with our decision to scope SL-346 to module-owned UI

These now match the same out-of-scope category as the BO breadcrumb,
help button, and submenu tabs. Module-owned a11y fixes (React Settings
app contrast, aria-labels, scope=col, focus trap, etc.) remain in PR.
- Disable Save Changes button when username/password empty, credential
  check is in flight, or inline credential error is shown
- Mark JSON API Username and Password as required (visual asterisk +
  aria-required) to surface the requirement before user clicks Save
The Saferpay Fields section was driven by a single hasBusinessLicense
flag derived from the active environment's stored license at page load.
Switching environments client-side did not re-evaluate it, so the
section stayed visible after switching to an environment with no
validated business license.

Expose testHasBusinessLicense and liveHasBusinessLicense separately
from the controller (initial payload and save response), and pick the
active one in api-credentials.tsx based on testMode.
…ntials

Disable Save Changes when API credentials empty or invalid
…nse-visibility

Fix Saferpay Fields visibility per active environment license
The polling script in saferpay_wait.tpl navigated the iframe itself via
window.location.href, leaving the parent window stuck on the SaferPay
iframe controller URL while the cart or order-confirmation page rendered
nested inside the iframe.

Use window.top so the redirect targets the parent window and the user
lands at /cart or /order-confirmation with the proper top-level chrome.
Address review feedback on PR #325:
- Use location.replace() so the polling page is not stored in history
  (Back from order-confirmation should not return to the spinner).
- Wrap window.top access in try/catch with an in-iframe fallback in
  case sandboxing or browser policy blocks the breakout.
…rictions-default

BUGFIX: payment methods default to all countries/currencies and dropdowns show All instead of 0
fix: break out of SaferPay iframe on payment status redirect
BUGFIX: redirect customer to cart instead of order history after Saferpay transaction abort
…le-info

BUGFIX: clarify Hosted field style info banner to mention Custom form requirement
Frontend (api-credentials.tsx): show inline error and disable Save when
any comma-separated entry fails an email regex.

Backend (AdminSaferPayOfficialSettingsController): reject save when
testMerchantEmails or liveMerchantEmails contains a value that fails
Validate::isEmail() — guards against curl/devtools bypass.
BUGFIX: validate Merchant Emails field on save
When 'Behavior when 3D Secure Payer Authentication was not successful'
was set to Authorize, the order was still being captured because the
AUTHORIZE branch was missing and the CANCEL branch did not return early,
so control fell through to the default-payment-behavior Capture block.

Each 3DS-fail branch now returns/dies explicitly, so the configured
3DS-fail behavior is always honored.
isValidResponse() already logs API errors before throwing
SaferPayApiException, so the surrounding catch in get(),
getWithCredentials(), and postWithCredentials() produced a redundant
error row for every failed call. Guard the catch-block logger->error
with if ($response === null) so it only fires on transport-level
failures, where isValidResponse() never ran.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants